<template>
  <div>
    <div
      class="component-item pointer"
      v-for="item in list"
      :key="item.id"
      @click="onItemClick(item)"
    >
      <component :is="item.name" v-bind="item.props"></component>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { SET_EDITOR } from "@/utils/Const";
import { useStore } from "vuex";
import { IGlobalDataProps } from "@/store/index.ts";
import { cloneDeep } from "lodash-es";
export default defineComponent({
  name: "ComponentsList",
  props: {
    list: {
      type: Array,
      required: true,
    },
  },
  setup(props) {
    const store = useStore<IGlobalDataProps>();
    // 添加组件到画布
    let onItemClick = (props: any): void => {
      store.commit(`editor/${SET_EDITOR}`, {
        name: props.name,
        props: cloneDeep(props.props),
      });
    };
    return {
      onItemClick,
    };
  },
});
</script>

<style lang="scss" scoped>
.h-text {
  text-align: center !important;
  margin-bottom: 10px;
}
.h-image {
  width: 120px !important;
}
.h-shape {
  margin: 0 auto 10px;
}
</style>
